<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import StatusCard from '@/components/dashboard/StatusCard.vue'
import EnvironmentChart from '@/components/charts/EnvironmentChart.vue'

const statusData = ref([
  { title: '在线传感器', value: 24, icon: 'Monitor', type: 'success' },
  { title: '报警数量', value: 3, icon: 'Warning', type: 'danger' },
  { title: '舱体数量', value: 6, icon: 'Box', type: 'primary' },
  { title: '设备状态', value: '正常', icon: 'Check', type: 'success' }
])

const quickLinks = ref([
  { title: '报警日志', icon: 'Bell', path: '/alarm' },
  { title: '舱体管理', icon: 'Box', path: '/cabin' },
  { title: '设备管理', icon: 'Setting', path: '/settings' }
])
</script>

<template>
  <div class="home">
    <!-- 状态卡片 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in statusData" :key="item.title">
        <status-card v-bind="item" />
      </el-col>
    </el-row>

    <!-- 环境数据图表 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>环境数据监控</span>
            </div>
          </template>
          <environment-chart />
        </el-card>
      </el-col>
      
      <!-- 快捷入口 -->
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>快捷入口</span>
            </div>
          </template>
          <div class="quick-links">
            <el-button 
              v-for="link in quickLinks" 
              :key="link.title"
              :icon="link.icon"
              @click="$router.push(link.path)">
              {{ link.title }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
#id{
  padding: 0;
}
.home {
  padding: 20px;
}
.mt-4 {
  margin-top: 20px;
}
.quick-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>  